<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				border: 1px solid #000;
				padding: 100px;
			}
			#div{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
		<script>
		/*
			如果要获取transform相关属性，那transform相关的设置也必须是通过该方法设置的 
		
		*/
		function cssTransform(element,attr,val){
			if(!element.transform){
				element.transform = {};
			}
			if(typeof val == 'undefined'){
				if(!element.transform[attr]){ //代表没有通过此方法设置过transform，那我们就返回默认值
					switch(attr){
						case'scale':
						case'scaleX':
						case'scaleY':
						case'scaleZ':
							element.transform[attr] = 100;
							break;
						default:
							element.transform[attr] = 0;
					};
				}
				return element.transform[attr];
			}else{
				element.transform[attr] = val;
				//element.style.WebkitTransform = element.style.transform = attr+'('+ val +'deg)';
				var transformVal = "";
				switch(attr){
					case 'scale':
					case 'scaleX':
					case 'scaleY':
					case 'scaleZ':
						transformVal = attr+'('+ (val/100) +')';
						break;
					case 'rotate':
					case 'rotateX':
					case 'rotateY':
					case 'rotateZ':
					case 'skewX':
					case 'skewY':
						transformVal = attr+'('+ val +'deg)';
						break;
					default:
						transformVal = attr+'('+ val +'px)';
				};
				element.style.WebkitTransform = element.style.transform = transformVal;
			};
		};
			window.onload = function(){
				var div = document.querySelector("#div");
				cssTransform(div,'scale',100);
				console.log(cssTransform(div,'scale'));
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="div"></div>
		</div>
	</body>
</html>
